<script setup lang="ts">
import type { HotItem } from '@/types/home'
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
import {getHome} from '@/services/home'
import { onShow } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const recordOriginal = ref([])

onShow(async () => {
  if (memberStore.profile) {
    // 如果用户已登录，则调用接口获取用户记录列表数据
    const userId = memberStore.profile.userId
    const res = await getHome(1)
    console.log(res)
    if (res.data && res.data.recordOriginal) {
      // 将接口返回的记录列表数据赋值给recordOriginal
      recordOriginal.value = res.data.recordOriginal
    }
  }
})
</script>
 
<template>
  <view v-if="!memberStore.profile" class="login-blank">
    <text class="text">绑定后可查看用户信息</text>
    <navigator url="/pages/login/login" hover-class="none">
      <button class="button">去绑定</button>
    </navigator>
  </view>
  <view v-else class="panel hot">
    <view class="item" v-for="(item, index) in recordOriginal" :key="index">
      <view class="record-item">
        <view class="info-card">
          <text class="title-text">信息：{{ item.recordContent }}</text>
        </view>
        <view class="advice-card">
          <text class="title-desc">医生建议：{{ item.doctorAdvice }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.hot {
  display: flex;
  flex-direction: column;
  margin: 20rpx;
  border-radius: 30rpx;
  // background-color: #A5DD9B;
}

.item {
  display: flex;
  flex-direction: column; /* 调整为列方向排列 */
  padding: 24rpx; /* 调整内边距 */
  border-bottom: 1rpx solid #eee; /* 添加底部边框 */

  &:last-child {
    border-bottom: none; /* 最后一个项目不显示底部边框 */
  }
}

.record-item {
  display: flex;
  justify-content: space-between; /* 在一行上两端对齐 */
}

.info-card, .advice-card {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #A5DD9B;
  border-radius: 10px;
  margin-right: 10px;
}

.title-text, .title-desc {
  margin: 0;
}

.title-desc {
  color: #7f7f7f;
}
</style>
